<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简历</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <style>
    body {
      background-color: #f8f9fa;
      font-family: "Microsoft YaHei", sans-serif;
      color: #343a40;
    }
    .resume-container {
      max-width: 1200px;
      margin: 30px auto;
      padding-bottom: 80px; /* 为底部按钮留出空间 */
    }
    .sidebar {
      background-color: white;
      border-radius: 8px;
      padding: 25px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
      height: 100%;
    }
    .main-content {
      background-color: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }
    .profile-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin: 0 auto 25px;
      display: block;
      object-fit: cover;
      border: 4px solid #f8f9fa;
    }
    .section-title {
      border-bottom: 2px solid #f1f3f5;
      padding-bottom: 12px;
      margin-bottom: 25px;
      font-weight: 600;
      color: #212529;
      display: flex;
      align-items: center;
    }
    .section-title i {
      margin-right: 10px;
      color: #20c997;
    }
    .info-item {
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
    }
    .info-item span:first-child {
      color: #6c757d;
      font-weight: 500;
    }
    .skill-bar {
      height: 8px;
      border-radius: 4px;
      margin-bottom: 20px;
      background-color: #e9ecef;
    }
    .skill-name {
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
    }
    .skill-name .skill-level {
      color: #6c757d;
      font-size: 14px;
    }
    .contact-icon {
      width: 20px;
      text-align: center;
      margin-right: 10px;
      color: #20c997;
    }
    .timeline-section {
      margin-bottom: 40px;
    }
    .timeline-item {
      position: relative;
      padding-left: 28px;
      margin-bottom: 30px;
      border-left: 2px solid #e9ecef;
      padding-bottom: 5px;
    }
    .timeline-item:before {
      content: "";
      position: absolute;
      left: -8px;
      top: 0;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #20c997;
    }
    .timeline-item:last-child {
      margin-bottom: 0;
    }
    .timeline-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .timeline-title {
      font-weight: 600;
      font-size: 1.1rem;
      color: #212529;
      margin: 0;
    }
    .timeline-date {
      color: #6c757d;
      font-size: 0.9rem;
      background-color: #f8f9fa;
      padding: 4px 10px;
      border-radius: 20px;
    }
    .timeline-subtitle {
      color: #495057;
      margin-bottom: 12px;
      font-weight: 500;
    }
    .timeline-content {
      color: #6c757d;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    .project-card {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      border-left: 4px solid #20c997;
    }
    .project-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    .project-title {
      font-weight: 600;
      font-size: 1.1rem;
      margin: 0;
    }
    .project-tech {
      background-color: #e9ecef;
      padding: 8px 15px;
      border-radius: 6px;
      margin-bottom: 15px;
      display: inline-block;
      font-size: 0.9rem;
      color: #495057;
    }
    .project-detail {
      margin-bottom: 12px;
      position: relative;
      padding-left: 25px;
      line-height: 1.6;
    }
    .project-detail i {
      position: absolute;
      left: 0;
      top: 4px;
      color: #20c997;
    }
    .demo-tag {
      background-color: #d1e7dd;
      color: #0f5132;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      margin-left: 10px;
    }
    .float-btn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 1000;
    }
    .float-btn .btn {
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .name-title {
      text-align: center;
      margin-bottom: 25px;
    }
    .name-title h3 {
      font-weight: 600;
      margin-bottom: 5px;
    }
    .name-title p {
      color: #6c757d;
    }
    .work-item {
      margin-bottom: 15px;
    }
    .work-item:last-child {
      margin-bottom: 0;
    }
    /* 新增悬浮按钮样式 */
    .project-btn-container {
      position: fixed;
      bottom: 30px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 1000;
      pointer-events: none; /* 让容器不阻挡点击 */
    }
    .project-btn {
      display: inline-block;
      background-color: #fd7e14;
      color: white;
      padding: 12px 25px;
      border-radius: 30px;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4);
      transition: all 0.3s ease;
      text-decoration: none;
      pointer-events: auto; /* 让按钮可以点击 */
      border: 2px solid #fd7e14;
      animation: pulse 2s infinite;
    }
    .project-btn:hover {
      background-color: #e96b02;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(253, 126, 20, 0.5);
      color: white;
    }
    .project-btn i {
      margin-left: 8px;
    }
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(253, 126, 20, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(253, 126, 20, 0);
      }
    }
    @media (max-width: 767.98px) {
      .sidebar {
        margin-bottom: 30px;
      }
      .profile-img {
        width: 120px;
        height: 120px;
      }
      .resume-container {
        margin: 15px auto;
      }
      .main-content, .sidebar {
        padding: 20px;
      }
      .project-btn {
        padding: 10px 20px;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="container resume-container">
    <div class="row g-4">
      <!-- 左侧边栏 -->
      <div class="col-lg-4 col-md-5">
        <div class="sidebar">
          <img src="image/touxiang.png" alt="个人头像" class="profile-img">
          <div class="name-title">
            <h3>网络乞丐</h3>
            <p>后端开发工程师 / 深圳</p>
          </div>

          <div class="section-title">
            <i class="bi bi-person-fill"></i> 基本信息
          </div>
          <div class="info-item">
            <span>个人信息</span>
            <span>网络乞丐 / 男 / 24岁</span>
          </div>
          <div class="info-item">
            <span>英语水平</span>
            <span>CET-6</span>
          </div>
          <div class="info-item">
            <span>计算机水平</span>
            <span>软考中级</span>
          </div>

          <div class="section-title mt-4">
            <i class="bi bi-telephone-fill"></i> 联系方式
          </div>
          <div class="info-item">
            <span>手机</span>
            <span>151-8828-5219</span>
          </div>
          <div class="info-item">
            <span>邮箱</span>
            <span>ze.zh@hotmail.com</span>
          </div>
          <div class="info-item">
            <span>个人主页</span>
            <span>0o111111o.com/</span>
          </div>
          <div class="info-item">
            <span>GitHub</span>
            <span>github.com/0o111111o</span>
          </div>

          <div class="section-title mt-4">
            <i class="bi bi-code-slash"></i> 技能点
          </div>
          <div class="skill-name">
            <span>HTML</span>
            <span class="skill-level">精通</span>
          </div>
          <div class="progress skill-bar">
            <div class="progress-bar bg-success" role="progressbar" style="width: 90%"></div>
          </div>
          
          <div class="skill-name">
            <span>CSS</span>
            <span class="skill-level">精通</span>
          </div>
          <div class="progress skill-bar">
            <div class="progress-bar bg-success" role="progressbar" style="width: 85%"></div>
          </div>
          
          <div class="skill-name">
            <span>JavaScript</span>
            <span class="skill-level">熟练</span>
          </div>
          <div class="progress skill-bar">
            <div class="progress-bar bg-success" role="progressbar" style="width: 80%"></div>
          </div>
          
          <div class="skill-name">
            <span>React</span>
            <span class="skill-level">熟练</span>
          </div>
          <div class="progress skill-bar">
            <div class="progress-bar bg-success" role="progressbar" style="width: 75%"></div>
          </div>
          
          <div class="skill-name">
            <span>Node.js</span>
            <span class="skill-level">良好</span>
          </div>
          <div class="progress skill-bar">
            <div class="progress-bar bg-success" role="progressbar" style="width: 70%"></div>
          </div>
          
          <div class="skill-name">
            <span>小程序</span>
            <span class="skill-level">良好</span>
          </div>
          <div class="progress skill-bar">
            <div class="progress-bar bg-success" role="progressbar" style="width: 65%"></div>
          </div>
        </div>
      </div>

      <!-- 右侧主要内容 -->
      <div class="col-lg-8 col-md-7">
        <div class="main-content">
          <!-- 教育经历 -->
          <div class="timeline-section">
            <h4 class="section-title">
              <i class="bi bi-mortarboard-fill"></i> 教育经历
            </h4>
            
            <div class="timeline-item">
              <div class="timeline-header">
                <h5 class="timeline-title">XXXX大学 - XXX专业（硕士）</h5>
                <span class="timeline-date">201X.9-201X.7</span>
              </div>
              <p class="timeline-content">
                专业排名 XXX，期间发表国际会议英文稿X篇，国内核心期刊文章X篇（其中第一作者X篇），获XXX，XXX2次，XXX2次
              </p>
            </div>
            
            <div class="timeline-item">
              <div class="timeline-header">
                <h5 class="timeline-title">XXXX大学 - XXX专业（本科）</h5>
                <span class="timeline-date">201X.9-201X.7</span>
              </div>
              <p class="timeline-content">
                专业排名 XXX，期间发表国内核心期刊文章X篇，三等奖学金X次
              </p>
            </div>
          </div>

          <!-- 工作经历 -->
          <div class="timeline-section">
            <h4 class="section-title">
              <i class="bi bi-briefcase-fill"></i> 工作经历
            </h4>
            
            <div class="timeline-item">
              <div class="timeline-header">
                <h5 class="timeline-title">XX公司 - 前端开发工程师</h5>
                <span class="timeline-date">2016.X 至 2017.X</span>
              </div>
              <p class="timeline-subtitle">实习期间主要负责：</p>
              
              <div class="work-item">
                <p class="timeline-content">
                  <i class="bi bi-check-circle-fill me-2 text-success"></i>
                  负责参与XX项目的前端开发工作，独立承担并完成XX、XX等功能点的开发，主要使用React+React Router+Node.js+SASS技术栈，实现前后端完全分离
                </p>
              </div>
              
              <div class="work-item">
                <p class="timeline-content">
                  <i class="bi bi-check-circle-fill me-2 text-success"></i>
                  配合UI团队，根据产品需求实现页面细节人性化模板，确保移动端显示正常
                </p>
              </div>
              
              <div class="work-item">
                <p class="timeline-content">
                  <i class="bi bi-check-circle-fill me-2 text-success"></i>
                  主要参与静态页面开发工作，确保在支付宝环境下完全兼容
                </p>
              </div>
            </div>
            
            <div class="timeline-item">
              <div class="timeline-header">
                <h5 class="timeline-title">XX公司 - 前端开发工程师</h5>
                <span class="timeline-date">20XX.10-20XX.7</span>
              </div>
              <p class="timeline-subtitle">实习期间主要负责：</p>
              
              <div class="work-item">
                <p class="timeline-content">
                  <i class="bi bi-check-circle-fill me-2 text-success"></i>
                  参与公司产品的前端开发工作，完成子模块回显、全站图片加载等功能，使用PHP/Wind+NAMP技术栈
                </p>
              </div>
              
              <div class="work-item">
                <p class="timeline-content">
                  <i class="bi bi-check-circle-fill me-2 text-success"></i>
                  实现第三方账号登录功能（微博、微信、QQ），使用WordPress+NAMP技术栈
                </p>
              </div>
              
              <div class="work-item">
                <p class="timeline-content">
                  <i class="bi bi-check-circle-fill me-2 text-success"></i>
                  负责活动页面开发和论坛帖子展示部分的改写工作
                </p>
              </div>
            </div>
          </div>

          <!-- 个人项目 -->
          <div class="timeline-section">
            <h4 class="section-title">
              <i class="bi bi-person-workspace"></i> 个人项目
            </h4>
            
            <div class="project-card">
              <div class="project-header">
                <h5 class="project-title">医学科学数据管理与共享平台</h5>
                <span class="demo-tag">Demo</span>
              </div>
              <div class="project-tech">
                <i class="bi bi-stack me-2"></i>ThinkPHP + MongoDB + Azure
              </div>
              
              <div class="project-detail">
                <i class="bi bi-bullseye"></i>
                <strong>目标：</strong> 采集多类型多来源医学科学数据并进行整合、管理和共享
              </div>
              
              <div class="project-detail">
                <i class="bi bi-people"></i>
                <strong>团队：</strong> 与2位医学专业学生合作开发
              </div>
              
              <div class="project-detail">
                <i class="bi bi-person-badge"></i>
                <strong>角色：</strong> 负责系统架构、功能板块及数据交流模块设计与开发
              </div>
              
              <div class="project-detail">
                <i class="bi bi-trophy"></i>
                <strong>成果：</strong> 获得第三届开源创客大赛"一等奖"（2/2000）
              </div>
            </div>
            
            <div class="project-card">
              <div class="project-header">
                <h5 class="project-title">肿瘤流行病数据可视化</h5>
                <span class="demo-tag">Demo</span>
              </div>
              <div class="project-tech">
                <i class="bi bi-stack me-2"></i>HTML5 + D3.js + ECharts + MySQL
              </div>
              
              <div class="project-detail">
                <i class="bi bi-bullseye"></i>
                <strong>目标：</strong> 实现肿瘤流行病数据多维度可视化展示与分析
              </div>
              
              <div class="project-detail">
                <i class="bi bi-people"></i>
                <strong>团队：</strong> 与1位医学专业学生合作开发
              </div>
              
              <div class="project-detail">
                <i class="bi bi-person-badge"></i>
                <strong>角色：</strong> 负责数据清洗、整理及可视化展示，使用D3.js和ECharts实现图形化展示
              </div>
              
              <div class="project-detail">
                <i class="bi bi-trophy"></i>
                <strong>成果：</strong> 获得第二届开源创客大赛"特等奖"（1/500）
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 浮动按钮 - 回到顶部 -->
  <div class="float-btn">
    <a href="#" class="btn btn-success rounded-circle">
      <i class="bi bi-arrow-up"></i>
    </a>
  </div>

  <!-- 新增悬浮按钮 - 查看详细项目 -->
  <div class="project-btn-container">
    <a href="#" class="project-btn">
      想看详细项目 <i class="bi bi-arrow-right"></i>
    </a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

